define(function () {
  var CountBar = {
    name: 'count-bar',
    template: ''
    + '<div class="count-bar clearfix">'
    + '<div v-show="countData.done" class="count-bar-progress progress-done" :style="{ width: reversedRate(countData.done)}">'
    + '<div class="count-bar-tips">{{ countData.done }}</div>'
    + '</div>'
    + '<div v-show="countData.fail" class="count-bar-progress progress-fail" :style="{ width: reversedRate(countData.fail)}">'
    + '<div class="count-bar-tips">{{ countData.fail }}</div>'
    + '</div>'
    + '<div v-show="countData.await" class="count-bar-progress progress-await" :style="{ width: reversedRate(countData.await)}">'
    + '<div class="count-bar-tips">{{ countData.await }}</div>'
    + '</div>'
    + '<div v-show="countData.current" class="count-bar-progress progress-current" :style="{ width: reversedRate(countData.current)}">'
    + '<div class="count-bar-tips">{{ countData.current }}</div>'
    + '</div>'
    + '</div>',
    props: {
      countData: {
        type: Object,
        defalut: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
      }
    },

    computed: {
      totalNum: function () {
        var res = 0;
        for (var key in this.countData) {
          res += this.countData[key];
        }
        return res;
      }
    },

    methods: {
      reversedRate: function (val) {
        return val / this.totalNum * 100 + '%';
      }
    }
  };

  return CountBar;
});
